<template>
  <pageManage>
    <template #head>
      <div>
        <span class="search-item">GroupId:</span>
        <a-input v-model:value="searchFun.searchInfo.groupId" class="search-item" style="width: 120px"></a-input>
      </div>
      <div>
        <span class="search-item">Tag:</span>
        <a-input v-model:value="searchFun.searchInfo.tag" class="search-item" style="width: 120px"></a-input>
      </div>
      <div>
        <span class="search-item">Topic:</span>
        <a-input v-model:value="searchFun.searchInfo.topic" class="search-item" style="width: 120px"></a-input>
      </div>
      <div>
        <span class="search-item">listenerUrl:</span>
        <a-input v-model:value="searchFun.searchInfo.listenerUrl" class="search-item" style="width: 120px"></a-input>
      </div>
      <a-button type="primary" @click="searchFun.searchClick">
        <SearchOutlined />
        查询
      </a-button>
      <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
    </template>
    <template #middle>
      <div>
        <a-table
          :columns="table.columns"
          :data-source="portComList"
          :pagination="false"
          :scroll="{ y: table.tableHeight }"
          :loading="table.loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'option'">
              <div>
                <!--                <a-button size="small" style="margin-right: 10px" @click="cli_detail(record)">详情</a-button>-->
                <a-button style="width: 40px" type="link" @click="cli_detail(record)">详情</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
    </template>
    <template #foot>
      <a-pagination
        v-model:current="pagFun.pagInfo.pageNo"
        show-quick-jumper
        :total="pagFun.pagInfo.total"
        :responsive="false"
        @change="pagFun.onChange"
      />
    </template>
  </pageManage>
  <MQpageDetail v-if="isShowDetail" :config-id="configId" @back="closeEdit"></MQpageDetail>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import pageManage from '@/components/pageManageV2'
import MQpageDetail from './MQpageDetail'

const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTable()
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 100,
    },
    {
      title: 'GroupId',
      dataIndex: 'groupId',
      key: 'groupId',
    },
    {
      title: '业务ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'ListenerUrlList',
      dataIndex: 'listenerUrlList',
      key: 'listenerUrlList',
    },
    {
      title: '消息模型',
      dataIndex: 'messageModel',
      key: 'messageModel',
    },
    {
      title: '消息种类',
      dataIndex: 'mqKind',
      key: 'mqKind',
    },
    {
      title: 'Tag',
      dataIndex: 'tag',
      key: 'tag',
    },
    {
      title: 'Topic',
      dataIndex: 'topic',
      key: 'topic',
    },
  ],
  tableHeight: 332,
  loading: false,
  getTable: (pag = pagFun.pagInfo) => {
    table.loading = true
    factory.getTable(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
})
table.getTable()
onMounted(() => {
  let ele = document.getElementsByClassName('manage-layoutManage')
  table.tableHeight = ele[0].offsetHeight - 217 + 32
})

//==表格中按钮,编辑,详情,===============
const isShowDetail = ref(false)
const configId = ref('')
const cli_detail = (obj) => {
  configId.value = obj.id
  isShowDetail.value = true
}
const closeEdit = () => {
  isShowDetail.value = false
}

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { groupId: '', tag: '', topic: '', listenerUrl: '' },
  searchClick: () => {
    let pagInfo = pagFun.pagInfo
    pagInfo.pageNo = 1
    let post = { ...pagInfo, ...searchFun.searchInfo }
    table.getTable(post)
  },
  reset: () => {
    searchFun.searchInfo = { groupId: '', tag: '', topic: '', listenerUrl: '' }
  },
})
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}
</style>
